iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 18
0
Modern Web

挑戰 CSS 30 天系列 第 18

day18_padding

  • 分享至 

  • xImage
  •  

***留白 (padding) 是在內容外,邊框內的部分。***我們可以對盒子四個邊的留白逐一設定:
padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)

第五個屬性,padding,是用來作為同時設定四個邊留白的捷徑屬性。語法如下:
padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
順序非常重要。第一個值一定是上面留白的值,第二個值一定是右邊留白的值,第三個值一定是下面留白的值,而第四個值一定是左邊留白的值。

有三種方式可以設定留白,分別為長度、百分比、以及 'auto'。

如以下範例:

<!DOCTYPE html>
<html>
<head>
  <title>CSS padding</title>
  <meta charset="utf-8">
  <style type="text/css">
	#container { 
		padding-top:15px; 
		padding-left:10px; 
		padding-right:auto; 
		padding-bottom:40px; 
		border:1px solid pink; 
	}
  </style>
</head>
<body>
    <div id="container"> 
		留白的例子。 
	</div>
</body>
</html>

成果如下圖:
https://ithelp.ithome.com.tw/upload/images/20171221/201064963LENS18raz.jpg


上一篇
day17_margin
下一篇
day19_z-index&position&top&left
系列文
挑戰 CSS 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言